<template>
  <el-dialog
    title="添加用户"
    :visible.sync="dialogVisibleAdd"
    :before-close="closedDialog"
  >
    <el-form :model="form" ref="ruleForm" :rules="rules">
      <el-form-item
        label="用户名"
        prop="username"
        :label-width="formLabelWidth"
      >
        <el-input v-model="form.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex" :label-width="formLabelWidth">
        <el-radio v-model="form.sex" :label="1">男</el-radio>
        <el-radio v-model="form.sex" :label="2">女</el-radio>
      </el-form-item>

      <el-form-item
        label="部门"
        prop="department_id"
        :label-width="formLabelWidth"
      >
        <el-select v-model="form.department_id" placeholder="请选择">
          <el-option
            v-for="item in departmentList"
            :key="item.id"
            :label="item.departname"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="职务" prop="duty" :label-width="formLabelWidth">
        <el-input v-model="form.duty" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="安全部门"
        prop="safetyduty"
        :label-width="formLabelWidth"
      >
        <el-input v-model="form.safetyduty" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="联系方式" prop="phone" :label-width="formLabelWidth">
        <el-input v-model="form.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="身份证号"
        prop="identitycardid"
        :label-width="formLabelWidth"
      >
        <el-input v-model="form.identitycardid" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closedDialog">取 消</el-button>
      <el-button type="primary" @click="submitDialog">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  model: {
    prop: 'dialogVisibleAdd',
    event: 'addUserClosed'
  },
  props: {
    dialogVisibleAdd: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      departmentList: [],
      form: {
        username: '',
        department_id: '',
        duty: '',
        safetyduty: '',
        phone: '',
        identitycardid: '',
        sex: 1
      },
      formLabelWidth: '120px',
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
      }
    }
  },
  watch: {
    dialogVisibleAdd(val) {
      if (val) {
        this.getDepartmentList()
      }
    }
  },
  methods: {
    // 获取部门候选项
    async getDepartmentList() {
      const { data } = await this.$http.get('/department')
      console.log(data)

      if (data.meta.status === 200) {
        this.departmentList = data.data.departmentList
      } else {
        this.$message.warning(data.meta.msg)
      }
    },
    closedDialog() {
      this.$emit('addUserClosed', false)
      // this.$parent.$data.dialogVisibleAdd = false
      this.$refs.ruleForm.resetFields()
    },
    async submitDialog() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const {
            data: { meta }
          } = await this.$http.post('users', this.form)

          if (meta.status === 201) {
            // 添加成功后，关闭对话框，更新 users 页码表格数据
            this.$message.success(meta.msg)
            this.$emit('addUserClosed', false)
            this.$emit('addUserSuccess')
            this.$refs.ruleForm.resetFields()
          } else {
            this.$message.error(meta.msg)
          }
        } else {
          this.$message.error('填入项未通过验证')
          return false
        }
      })
    }
  }
}
</script>

<style></style>
